import React, { PureComponent } from 'react'
import { connect } from 'dva'
import { Card, Form, Input, Table, Row, Col, Button } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import PropModal from '../propCheck/PropModal'
import styles from './Index.less'
import settings from '@/../config/defaultSettings'

const FormItem = Form.Item

@connect(({ loading, propTrans }) => ({
  propTrans,
  loading: loading.models.propTrans,
}))
@Form.create()
export default class propTrans extends PureComponent {
  // 组件加载完成后加载数据
  componentDidMount() {
    const { dispatch } = this.props
    dispatch({
      type: 'propTrans/fetchList',
    })
  }

  // 重置事件
  handleFormReset = () => {
    const { form, dispatch } = this.props
    form.resetFields()
    dispatch({
      type: 'propTrans/fetchList',
    })
  }

  // 搜索事件
  handleSearch = e => {
    e.preventDefault()

    const { form, dispatch } = this.props
    // 表单验证
    form.validateFields((err, fieldsValue) => {
      if (err) return

      const values = {
        ...fieldsValue,
      }

      dispatch({
        type: 'propTrans/fetchList',
        payload: values,
      })
    })
  }

  // 表格动作触发事件
  handleListChange = (pg, filtersArg, sorter) => {
    const { dispatch } = this.props
    const { formValues, pagination } = this.props.propTrans
    if (sorter.field && pagination.currentPage === pg.current) {
      return
    }

    const params = {
      ...formValues,
      current: pg.current,
    }

    dispatch({
      type: 'propTrans/fetchList',
      payload: params,
    })
  }

  handleShowPropsModal = (record, e) => {
    const { dispatch } = this.props
    e.preventDefault()
    //
    dispatch({
      type: 'propTrans/updateState',
      payload: {
        showProps: true,
      },
    })
    //
    dispatch({
      type: 'propTrans/fetchProps',
      payload: {
        id: record.id,
      },
    })
  }

  renderSearchForm = () => {
    const { loading } = this.props
    //
    const { getFieldDecorator } = this.props.form
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={12} sm={24}>
            <FormItem label="*转移单号">
              {getFieldDecorator('orderNo')(
                <Input placeholder="请输入" maxLength={settings.inputMaxLength} />,
              )}
            </FormItem>
          </Col>
          {/* <Col md={8} sm={24}>
            <FormItem label="盘点状态">
              {getFieldDecorator('orderStatus')(
                <Select placeholder="请选择" allowClear>
                  {this.renderOptionNodes('pd_status')}
                </Select>,
              )}
            </FormItem>
          </Col> */}
          {/* <Col md={12} sm={24}>
            <FormItem label="转移名称">
              {getFieldDecorator('pdOperatorName')(
                <Input placeholder="请输入" maxLength={settings.inputMaxLength} />,
              )}
            </FormItem>
          </Col> */}
        </Row>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 15 }}>
          <div style={{ marginLeft: 'auto' }}>
            <Button type="primary" htmlType="submit" loading={loading}>
              查询
            </Button>
            <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset} loading={loading}>
              重置
            </Button>
          </div>
        </div>
      </Form>
    )
  }

  // 渲染界面
  render() {
    const { loading, dispatch } = this.props
    const { list, pagination, showProps, PropsData } = this.props.propTrans

    const propModalProps = {
      showModal: showProps,
      dataSource: PropsData,
      modalCloseCallback: () => {
        dispatch({
          type: 'propTrans/updateState',
          payload: {
            showProps: false,
          },
        })
      },
    }

    // TODO:
    const columns = [
      {
        render: (t, r, i) => <span>{i + 1}</span>,
        width: 35,
        key: 'index',
      },
      {
        title: '转移单号',
        align: 'center',
        dataIndex: 'orderNo',
        width: 100,
        sortDirections: ['descend', 'ascend'],
      },
      {
        title: '原使用部门',
        align: 'center',
        dataIndex: 'oldOrgName',
        width: 130,
      },
      {
        title: '原使用人',
        align: 'center',
        width: 80,
        dataIndex: 'oldUseUserName',
      },
      {
        title: '转移后使用部门',
        align: 'center',
        width: 80,
        dataIndex: 'chanageOrgName',
      },
      {
        title: '转移后使用人',
        align: 'center',
        width: 100,
        dataIndex: 'chanageUserName',
      },
      {
        title: '转移时间',
        align: 'center',
        width: 100,
        dataIndex: 'gmtChanage',
      },
      {
        title: '状态',
        align: 'center',
        width: 100,
        dataIndex: 'statusName',
      },
      {
        title: '操作',
        align: 'center',
        width: 80,
        render: (text, record) => (
          <div>
            <a onClick={e => this.handleShowPropsModal(record, e)}>查看</a>
          </div>
        ),
      },
    ]
    return (
      <PageHeaderWrapper title="资产转移">
        <div className={styles.goodsInfoList}>
          <div className={styles.goodsInfoListForm}>
            <Card className={styles.noPadding} bordered={false}>
              {this.renderSearchForm()}
            </Card>
            <Card style={{ marginTop: 15 }} className={styles.noPadding} bordered={false}>
              <Table
                loading={loading}
                size="small"
                bordered
                dataSource={list}
                rowKey={record => record.id}
                pagination={pagination}
                columns={columns}
                onChange={this.handleListChange}
              />
            </Card>
          </div>
        </div>
        <PropModal {...propModalProps}></PropModal>
      </PageHeaderWrapper>
    )
  }
}
